<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="css/base.css" />
    <link type="text/css" rel="stylesheet" href="css/destine.css" />
    <link type="text/css" rel="stylesheet" href="css/alicdn.css" />
</head>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="http://app.cloopen.com/im50/ytx-web-im-min-new-5.4.0.js">
</script>
<script>
    $(function () {
        //初始化SDK
        var resp = RL_YTX.init("8aaf0708679d082f0167a0f8bb0601e6");
        console.log(resp);
        if(170002== resp.code){
//缺少必要参数，详情见msg参数
//用户逻辑处理
        }else if(174001 == resp.code) {
//不支持HTML5，关闭页面//用户逻辑处理}
        }else if (200 == resp.code) {
        }
        //初始化成功
        //用户逻辑处理
        //判断不支持的功能，屏蔽页面展示
        var unsupport = resp.unsupport;
    });
    $(function () {
    //账号登录参数设置
    var loginBuilder = new RL_YTX.LoginBuilder();
    console.log(loginBuilder);
    //登录类型 1账号登录，3voip账号密码登录   1c9a119f64fe3783fddc536a6632b0f2
    loginBuilder.setType(1);
    //设置用户名
    loginBuilder.setUserName("fyc3");
    //type值为1时，密码可以不赋值
    loginBuilder.setPwd();
    //设置sig
    loginBuilder.setSig("7ef295c0153d772b099d3d76a4ea00b7");
    //设置时间戳
    loginBuilder.setTimestamp("20181213032352");
    //执行用户登录
     RL_YTX.login(loginBuilder, function(obj){
        alert("成功");
         //新建消息体对象
         var obj2 = new RL_YTX.MsgBuilder();
         //设置自定义消息id
         obj2.setId("2345");
//设置发送的文本内容
         obj2.setText("沙雕2");
//设置发送的消息类型1:文本消息 4:图片消息 6:压缩文件 7:非压缩文件
//发送非文本消息时，text字段将被忽略，发送文本消息时 file字段将被忽略
         obj2.setType(1);
//设置接收者
         obj2.setReceiver("fyc4");
         console.log(666);
         RL_YTX.sendMsg(obj2, function(){
             console.log(233);
//发送消息成功
//处理用户逻辑，通知页面
         }, function(obj) {//失败
//发送消息失败
//处理用户逻辑，通知页面刷新，展现重发按钮
         });
//登录成功回调
//注册接收消息事件监听
        RL_YTX.onMsgReceiveListener(function(obj){
            console.log(obj);
//收到push消息或者离线消息或判断输入状态//如果obj.msgType==12  判断obj.msgDomainn的值//obj.msgDomain 0 无输入状态  1 正在输入  2 正在录音
        });
//注册群组通知事件监听
        RL_YTX.onNoticeReceiveListener(function(obj) {
//收到群组通知});
 });
     }), function(obj){
        //登录失败方法回调
            alert("登录失败");
    }
    });

    $(function () {
        //新建消息体对象
        var obj = new RL_YTX.MsgBuilder();
    });
</script>
<body>
<style type="text/css">
    body {
        background: #f5f5f5;
    }

    .opinion_box {
        padding: 20px;
        height: 100%;
        overflow: auto;
    }

    .opinion_chat {
        margin-bottom: 40px;
    }

    .user_opinion {
        float: right;
        width: 100%;
    }

    .opinion_up {
        margin-top: 40px;
    }

    .user_opinion_up_left {
        float: right;
        margin: 0px 10px;
    }

    .user_opinion_name {
        float: right;
    }

    .user_opinion_header {
        float: right;
    }

    .user_img {
        width: 45px;
        height: 45px;
        float: right;
        border-radius: 23px;
    }

    .opinion_down {
        position: relative;
        top: -8px;
    }

    .opinion_arrow {
        height: 0px;
        width: 0px;
        border-width: 9px;
        border-style: solid;
        position: relative;
    }

    .user_opinion_arrow {
        right: 14px;
        top: 8px;
        float: right;
        border-color: transparent transparent #38ADFF transparent;
    }

    .opinion_message {
        font-size: 16px;
        border-radius: 3px;
        padding: 13px 11px;
        margin: 7px 20px 22px;
        position: relative;
    }

    .user_opinion_message {
        right: -28px;
        background: #38ADFF;
        color: #fff;
        float: right;
        top: 18px;
    }

    .doctor_img {
        width: 45px;
        height: 45px;
        border-radius: 23px;
        float: left;
    }

    .doctor_opinion_up_right {
        margin: 0px 10px;
        float: left;
    }

    .doctor_opinion_arrow {
        left: 15px;
        top: 2px;
        float: left;
        border-color: transparent transparent #ecf0f1 transparent;
    }

    .doctor_opinion_message {
        right: 20px;
        background: #ecf0f1;
        color: #000;
        float: left;
        top: 12px;
    }

    .opinion_time {
        margin-top: 5px;
        color: #888;
    }

    .edit_box {
        height: 55px;
        border-top: 1px solid #e8e8e8;
        position: fixed;
        bottom: 0px;
        width: 100%;
        background: #fff;
    }

    .edit_input {
        height: 70%;
        width: 75%;
        position: relative;
        top: 7px;
        left: 25px;
        text-indent: 10px;
        border: none;
        border-bottom: 1px solid #e8e8e8;
    }

    .edit_input:focus {
        border: none;
        border-bottom: 1px solid #38ADFF;
    }

    .send_button {

    }

    .send_button_img {
        width: 34px;
        float: right;
        margin-right: 20px;
        position: relative;
        bottom: 26px;
    }
</style>
</head>
<header>
    <div class="head-menu">
        <h2>黄老板</h2>
    </div>
</header>
<div class="opinion_box">
    <div class="opinion_chat">
        <div class="chat_opinion_box">
            <div class="user_opinion">
                <div class="user_opinion_up opinion_up">
                    <div class="user_opinion_header">
                        <img src="imgs/reg-bg.jpg" class="user_img">
                    </div>
                    <div class="user_opinion_up_left">
                        <div class="clear"></div>
                        <div class="user_opinion_time opinion_time">2019-01-25 16:00:00</div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="user_opinion_down opinion_down">
                    <li class="user_opinion_message opinion_message">反馈电饭锅乳房沃尔沃二绕弯儿无信息</li>
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="chat_opinion_box">
            <div class="doctor_opinion">
                <div class="doctor_opinion_up opinion_up">
                    <div class="doctor_opinion_up_left">
                        <div class="doctor_opinion_header">
                            <img src="imgs/reg-bg.jpg" class="doctor_img">
                        </div>
                        <div class="doctor_opinion_up_right">
                            <div class="doctor_opinion_time opinion_time">2019-01-25 16:04:00</div>
                        </div>
                        <div class="clear"></div>
                    </div>

                </div>
                <div class="doctor_opinion_down opinion_down">
                    <div class="doctor_opinion_arrow opinion_arrow"></div>
                    <li class="doctor_opinion_message opinion_message">回复信息人大股东发生过的双方各广东省高</li>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>

<div class="edit_box">
    <input class="edit_input" placeholder="请输入">
    <div class="send_button" onclick="sendMessage()">
        <img src="imgs/send_button.png" class="send_button_img">
    </div>
    <div class="clear"></div>
</div>
</body>
</html>